import styles from './index.module.less'
import { Bars, Edit, StarO, Search } from '@react-vant/icons'
import Menu from '@/components/Menu'
import { useState } from 'react'
import { useNavigate } from 'react-router'
//随机颜色，颜色偏亮色系
const randomColor = () => {
  const r = Math.floor(Math.random() * 100 + 155)
  const g = Math.floor(Math.random() * 100 + 155)
  const b = Math.floor(Math.random() * 100 + 155)
  return `rgb(${r},${g},${b})`
}
const randomColorText = () => {
  const r = Math.floor(Math.random() * 100 + 100)
  const g = Math.floor(Math.random() * 100 + 100)
  const b = Math.floor(Math.random() * 100 + 100)
  return `rgb(${r},${g},${b})`
}
const noteClassList = [
  { title: '美食', id: 1 },
  { title: '旅行', id: 2 },
  { title: '恋爱', id: 3 },
  { title: '学习', id: 4 },
  { title: '吵架', id: 5 },
]
export default function NoteClass() {
  const [showMenu, setShowMenu] = useState(false)
  const [startX, setStartX] = useState(0)
  // 新增：菜单触摸起始位置
  const [menuStartX, setMenuStartX] = useState(0)
  const navigate = useNavigate()

  // 新增：处理触摸开始事件
  const handleTouchStart = (e) => {
    setStartX(e.touches[0].clientX)
  }

  // 新增：处理触摸移动事件
  const handleTouchMove = (e) => {
    const currentX = e.touches[0].clientX
    // 向右滑动超过50px阈值时触发菜单显示
    if (currentX - startX > 50) {
      setShowMenu(true)
    }
  }

  const goNoteList = (title) => {
    navigate(`/noteList?category=${title}`)
  }

  // 新增：菜单触摸开始事件
  const handleMenuTouchStart = (e) => {
    setMenuStartX(e.touches[0].clientX)
  }

  // 新增：菜单触摸移动事件
  const handleMenuTouchMove = (e) => {
    const currentX = e.touches[0].clientX
    // 向左滑动超过50px阈值时关闭菜单
    if (menuStartX - currentX > 50) {
      setShowMenu(false)
    }
  }

  return (
    <div className={styles['note-class-wrapper']}>
      {/* 保持note-class原有代码不变 */}
      <div 
        className={[styles['note-class'], showMenu ? styles['hide'] : ''].join(' ')}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
      >
        <header>
          <div>
            {/* 菜单 */}
            <Bars className={styles['icon']} onClick={()=>{setShowMenu(true)}}/>
          </div>
          <div>
            {/* 编辑 */}
            <Edit className={styles['icon']} />
            {/* 收藏 */}
            <StarO className={styles['icon']} />
            <Search className={styles['icon']} />
          </div>
        </header>
        <section>
          {
            noteClassList.map(item => (
              <div 
              key={item.id} 
              className={styles['note-class-item']} 
              style={{ backgroundColor: randomColor() }}
              onClick={()=>{goNoteList(item.title)}}
              >
                <span className={styles['note-class-item-title']} style={{color:randomColorText()}}>{item.title}</span>
              </div>
            ))
          }
        </section>
      </div>
      {/* 修改：为菜单添加触摸事件监听 */}
      <div 
        className={[styles['menu'], showMenu ? styles['show'] : ''].join(' ')}
        onTouchStart={handleMenuTouchStart}
        onTouchMove={handleMenuTouchMove}
      >
        <Menu setShowMenu={setShowMenu}></Menu>
      </div>
    </div>
  )
}
